<!doctype html>
<html lang="zxx">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Panda熊猫影城</title>
	<link rel="stylesheet" href="../css/style-starter.css">
	<link href="http://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,600&display=swap"
		rel="stylesheet">
	<link rel="shortcut icon" href="images/xm.jpeg">
</head>

<body>
	<header id="site-header" class="w3l-header fixed-top">
		<nav class="navbar navbar-expand-lg navbar-light fill px-lg-0 py-0 px-3">
			<div class="container">
				<h1><a class="navbar-brand" href="index.html">
					<span class="fa fa-play icon-log" aria-hidden="true"></span>
					Panda熊猫影城<img src="/images/xm.jpeg"width="70" height="70">
				    </a>
				</h1>

				<div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul class="navbar-nav ml-auto">
						<li class="nav-item">
							<a class="nav-link" href="index.html">主页</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="about.html">关于</a>
						</li>
						<li class="nav-item active">
							<a class="nav-link" href="genre.html">电影</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="order.html">订单</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="Login.html">登录</a>
						</li>
					</ul>

					<div class="search-right">
									<input id="movieName"  type="search" placeholder="请输入要搜索的电影信息" name="search" required="required" autofocus="">
									<button type="submit" class="btn" onclick="SearchMovie()">
										<span class="fa fa-search" ria-hidden="true"></span>
									</button>
					</div>
				</div>

				<div class="mobile-position">
					<nav class="navigation">
						<div class="theme-switch-wrapper">
							<label class="theme-switch" for="checkbox">
								<input type="checkbox" id="checkbox">
								<div class="mode-container">
									<i class="gg-sun"></i>
									<i class="gg-moon"></i>
								</div>
							</label>
						</div>
					</nav>
				</div>
			</div>
		</nav>
	</header>

	<div class="w3l-breadcrumbs">
		<nav id="breadcrumbs" class="breadcrumbs">
			<div class="container page-wrapper">
				<a href="index.html">主页</a> » <span class="breadcrumb_last" aria-current="page">电影</span>
			</div>
		</nav>
	</div>

	<section class="w3l-grids">
		<div class="grids-main py-5">
			<div class="container py-lg-4">
				<div class="w3l-populohny-grids">
					<div class="item vhny-grid">
						<div class="box16 mb-0">

								<a id="movie-container">
									<!-- 这里将显示电影信息 -->
								<img class="img-fluid" src="">
								<div class="box-content">
									<h3 class="title"></h3>
									<h4> <span class="post"></span> </h4>
								</div>

							    </a>

						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<script src="../js/jquery-3.3.1.min.js"></script>
	<script src="../js/theme-change.js"></script>
	<script src="../js/owl.carousel.js"></script>
	<script src="../js/bootstrap.min.js"></script>
<script>
	function SearchMovie() {
		const movieName = document.getElementById("movieName").value;
		if (!movieName || movieName.trim().length === 0) {
			// 使用更平滑的反馈机制，这里以Toast为例，需要引入相应的库
			alert("请输入电影名称");
			return;
		}
		const apiUrl = 'http://localhost:8082/movie/findMovieByName';

		fetch(apiUrl, {
			method: "POST",
			headers: {
				"Content-Type": "application/json;charset=UTF-8"
			},
			body: JSON.stringify({
				movieName: movieName,
			})
		})
				.then(res => res.json()) // 直接解析为JSON对象
				.then(data => {
					// 将电影信息插入到页面中
					document.querySelector(".img-fluid").src= data.movieIntroduction;
					document.querySelector(".title").textContent = data.movieName;
					document.querySelector(".post").textContent = data.movieLength;
				})
	}
</script>
</body>
</html>
